<!DOCTYPE html>
<html lang="k">
	<head>
		<meta charset="utf-8">

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>08html테이블</title>


		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
	</head>

	<body>
		<h1>테이블</h1>
	<table style="width: 850px" border="1" cellpadding="5" cellspacing="1">
		<caption>게시판</caption>
		
		<colgroup style="background-color: lightgreen">
		<col style="width: 10%"/>
		<col />
		<col style="width: 15%; background: lightblue"/>
		<col style="width: 15%"/>
		<col style="width: 10%"/>
		</colgroup>
		
		<tr><th>번호</th><th>제목</th><th>작성자</th><th>작성일</th><th>조회</th></tr> 
		<tr><td>1</td><td>슈퍼셀의 Clash of Clans,안드로이드 출시</td><td>bbalgae_</td><td>2013.12.12</td><td>0</td></tr>
		<tr><td>2</td><td>슈퍼셀의 Clash of Clans,안드로이드 출시</td><td>bbalgae_</td><td>2013.12.12</td><td>0</td></tr>
		<tr><td>3</td><td>슈퍼셀의 Clash of Clans,안드로이드 출시</td><td>bbalgae_</td><td>2013.12.12</td><td>0</td></tr>
		<tr><td>4</td><td>슈퍼셀의 Clash of Clans,안드로이드 출시</td><td>bbalgae_</td><td>2013.12.12</td><td>0</td></tr>
		<tr><td>5</td><td>슈퍼셀의 Clash of Clans,안드로이드 출시</td><td>bbalgae_</td><td>2013.12.12</td><td>0</td></tr>
		<tr><td>6</td><td>슈퍼셀의 Clash of Clans,안드로이드 출시</td><td>bbalgae_</td><td>2013.12.12</td><td>0</td></tr>
		<tr><td>7</td><td>슈퍼셀의 Clash of Clans,안드로이드 출시</td><td>bbalgae_</td><td>2013.12.12</td><td>0</td></tr>
		<tr><td>8</td><td>슈퍼셀의 Clash of Clans,안드로이드 출시</td><td>bbalgae_</td><td>2013.12.12</td><td>0</td></tr>
		<tr><td>9</td><td>슈퍼셀의 Clash of Clans,안드로이드 출시</td><td>bbalgae_</td><td>2013.12.12</td><td>0</td></tr>
		<tr><td>10</td><td>슈퍼셀의 Clash of Clans,안드로이드 출시</td><td>bbalgae_</td><td>2013.12.12</td><td>0</td></tr>
		</table>
		<hr />
		<table style="width: 500px" border="1">
			<caption>지역별 홍차</caption>
			<colgroup>
			<col />
			<col />
		
			</colgroup>
	<tr><td colspan="2">지역별 홍차</td><!-- <td>d</td> --></tr>			
	<tr><td rowspan="3">중국</td><td>정산소종</td></tr>			
	<tr><!-- <td>d</td> --><td>기문</td></tr>			
	<tr><!-- <td>d</td> --><td>운남</td></tr>			
	<tr><td rowspan="4">인도 및 스리랑카</td><td>아삼</td></tr>			
	<tr><!-- <td>d</td> --><td>d</td>실론</tr>			
	<tr><!-- <td>d</td> --><td>d</td>다질링</tr>			
	<tr><!-- <td>d</td> --><td>d</td>닐기리</tr>			
		</table>
		
		<hr />	
		<table style="width: 500px;height: 500px" border="1">
			<caption>한국의 차</caption>
			<colgroup>
			</colgroup>
			<tr><td colspan="6">한국의 차</td></tr>
			<tr><td rowspan="6">뿌리차</td><td>인삼차</td><td rowspan="9">과일차</td><td>수정과</td><td rowspan="5">잎차</td><td>뽕잎차</td></tr>
			<tr><td>당귀차</td><td>유자차</td><td>감잎차</td></tr>
			<tr><td>생강차</td><td>구기자차</td><td>솔잎차</td></tr>
			<tr><td>칡차</td><td>대추차</td><td>국잎차</td></tr>
			<tr><td>둥굴레차</td><td>오지마차</td><td>이슬차</td></tr>
			<tr><td>마차</td><td>매실차</td><td rowspan="4">기타</td><td>두충차</td></tr>
			<tr><td rowspan="3">곡물차</td><td>현미차</td><td>모과차</td><td>영지버섯차</td></tr>
			<tr>><td>보리차</td><td>산수유차</td><td>귤강차</td></tr>
			<tr><td>옥수수차</td><td>탱자차</td><td>쌍화차</td></tr>
			
		</table>
	<hr />
		<table style="width: 500" border="1">
			<caption>시간표</caption>
			
			<!-- <tr><td colspan="10">시간표</td></tr> -->
			<tr><td rowspan="2">구분</td><td>교시</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
			<tr><td>요일</td><td>8:30~9:20</td><td>8:30~9:20</td><td>8:30~9:20</td><td>8:30~9:20</td><td>8:30~9:20</td><td>8:30~9:20</td><td>8:30~9:20</td><td>8:30~9:20</td></tr>
			<tr><td rowspan="6">3Q<br />2주<br />3배</td><td rowspan="2">월</td><td rowspan="2"> 
			</td><td> </td><td  colspan="2">응급및재해간호 </td><td colspan="2"> </td><td colspan="2" rowspan="2"> </td></tr>
			<tr><td colspan="3">발달장애아동건강간호</td><td colspan="2">재활간호학</td><!-- <td colspan="2" rowspan="2"> </td> --></tr>
			
			<tr><td >화</td>
				<td colspan="2">약리학<br />권신혜재수강</td>
				<td colspan="2" >1 </td>
					<td colspan="2" > 2</td>
					<td colspan="2" >3 </td></tr>
					
			<tr><td >수</td>
				<td >1</td>
				<td  colspan="3">보건의료관계법규<br />(김정선)</td>
					<td  >응급및 재해간호 최순희</td>
					<td  >1 </td>
					<td  colspan="2"> 2</td> </tr>	
			<tr><td >목</td>
				<td > </td>
				<td  colspan="2"> </td>
					<td  colspan="2"> </td>	<td colspan="2" > 재활간호학 </td>
					<td  colspan="2"> </td> </tr>	
		
		
			</table>
			
			<hr />
				<table style="width: 850px" border="1">
					<caption>시간표</caption>
					<colgroup>
					<col style="width: 10%"/>
					<col style="width: 10%"/>
					<col style="width: 10%"/>
					<col style="width: 10%"/>
					<col style="width: 10%"/>
					<col style="width: 10%"/>
					<col style="width: 10%"/>
					<col style="width: 10%"/>
					<col style="width: 10%"/>
					<col style="width: 10%"/>
					</colgroup>
					<thead>
						<tr><td colspan="3">9.09~9.20</td><td colspan="4">2013학년도 4학년 2학기 강의시간표</td><td colspan="3">강의실: 간호관 409호</td></tr>
					</thead>
					<tbody>
						<tr><td rowspan="2">구분</td><td rowspan="2">교시 <br />요일</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td></tr>
						<tr><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td></tr>
						<tr><td>*</td><td rowspan="2">월</td><td rowspan="2">* <br />요일</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td></tr>
						<tr><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td></tr>
						
					</tbody>
					
					<tfoot>
						
						<tr><td colspan="5">-추석보강 : 9.23(월)~9.25(수)(3일간)</td><td colspan="5">	-중간고사 : 9.26(목)~9.27(금)(2일간)	</td></tr>	
							
						
					</tfoot>
					
				</table>
					
		<!--
			table : 테이블
			엑셀처럼 행과 열로 이뤄진 그리드(grid)에 정보 표시
			정보를 두 축(행,열)으로 구분해서 복잡한 데이터표시
			그리드의 각 블럭은 테이블 셀(열)이라 함
			표를 작성하는 순서는 행(tr)을 먼저 정의하고 그 후 내요을 나타내기 위한 열(td,th)을 정의
			<tr>은 표의 행을 정의
			<th>는 제목 열을 정의
			<td>는 일반 열을 정의
			th/td 요소에 colspan/rowspan속성으로 여러개의 셀을 하나로 결합할 수도 있음
			
			caption 태그로 표의 제목을 표시
			
			표의 전체 열/각 열에 대해 스타일(배경색,너비등)을 지정하려면 colgroup와 col 태그를 사용
			반드시 caption 태그 아래에  작성 
			
			계산서처럼 어떤 테이블은 머릿말,본문외 에도 꼬리말이 존재함
			thead 태그로 머리말을 tobdy태그로 본문을 tfoot태그로 꼬리말을 나타낼 수 있음.
					
			width 속성으로 테이블 너비 지정
			border 속성으로 테이블 테두리 지정
			테두리 단위는 픽셀(px)
			cellpadding 속성으로 테이블 각 열 내부 여백을 cellspacing속성으로 테이블 각 열 사이 여백 지정
			하지만, CSS를 사용할 것을 추천함.
		-->
		
		<!--너비는 350px, 테두리는 5px 
			3x3크기의 표작성
			  -->
		<hr />
				<table style="width: 350px" cellpadding="5" cellspacing="0" border="5" align="center">
					<colgroup>	
					<col />
					<col />
					<col />
				
					</colgroup>
					
					<caption>제목없는 테이블</caption>
					<tr><td>&nbsp; </td><td>&pi; </td><td>&amp; </td></tr>
					<tr><td>&lt;h1&gt; </td><td>&copy; </td><td>&nbsp; </td></tr>
					<tr><td>&nbsp; </td><td>&nbsp; </td><td>&nbsp; </td></tr>
					
				</table>
						
				</body>
</html>
